<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		div{
			width: 400px;
			height: 400px;
			background: orange;
			display: none;
		}
	</style>
</head>
<body>

	<button>展开</button>
	<button>收缩</button>
	<button>切换</button>
	<div></div>
<script type="text/javascript" src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
	//slideDown(a,b,c) 滑入
	// a:时间 毫秒数/ slow(600ms) fast(200ms) 
	// b: 速度 linear 匀速
	// c: 回调函数
	// stop() 每次点击停止上一次动画
	$('button').eq(0).click(()=>{
		$('div').stop().slideDown(3000,'linear',function() {
			console.log('展开成功')
		})
	})
	//滑出
	$('button').eq(1).click(()=>{
		$('div').stop().slideUp(2000,'linear',function() {
			console.log('滑出成功')
		})
	})

	//切换
	$('button').eq(2).click(()=>{
		$('div').stop().slideToggle(2000,'linear',function() {
			console.log('滑出成功')
		})
	})

</script>
</body>
</html>